

{% if theme_config.global.product_size == "11" %}
  {% assign product_size = "11" %}
{% elsif theme_config.global.product_size == "34" %}
  {% assign product_size = "34" %}
{% elsif theme_config.global.product_size == "23" %}
  {% assign product_size = "23" %}
{% elsif theme_config.global.product_size == "12" %}
  {% assign product_size = "12" %}
{% endif %}

{%- if product.image.alt == "" -%}
  {% assign product_alt = product | image_alt:'product'  %}
{%- else -%}
  {% assign product_alt = product.image.alt %}
{%- endif -%}


{%- if product.images[1].alt == "" -%}
  {% assign product_alt2 = product | image_alt:'product'  %}
{%- else -%}
  {% assign product_alt2 = product.images[1].alt %}
{%- endif -%}

{%- capture product_handle -%}
  {% if product.handle and product.handle != "" %}
    {%- if storeConfig.collection_product_url == 1 -%}
      /products/{{ product.handle }}?data_from={{product.data_from | default:data_from}}
    {%- else -%}
      {%- if collection_handle and collection_handle != "" -%}/collections/{{collection_handle}}{% endif %}/products/{{ product.handle }}?data_from={{product.data_from | default:data_from}}
    {%- endif -%}
  {% else %}
    javascript:;
  {%- endif -%}
{%- endcapture -%}

{%- capture text_ellipsis -%}
  {%- if theme_config.global.product_title_style == 'hide' -%}
    text-ellipsis
  {%- elsif theme_config.global.product_title_style == 'hide2' -%}
    text-ellipsis2
  {%- endif -%}
{%- endcapture -%}

{%- capture supplier_name -%}
  {% if theme_config.global.supplier_display_selection == '1' %}
    <div class="supplier_name">{{ theme_config.global.supplier_name }}</div>
  {% elsif theme_config.global.supplier_display_selection == '2' %}
    <div class="supplier_name">{{ product.vendor }}</div>
  {% endif %}
{%- endcapture -%}

<li class="{{ swiper }}">
  <div class="product_pic {% if theme_config.global.product_move_two %}{% if product.images[1].src %}product_img_hover{% endif %}{% endif %}">

    <a class="product_img plugin-product_item-img_box  " data-product-id="{{product.id}}" data-scale="{{ product_size }}" href="{{product_handle}}">
      {% include 'lazy_img', class:"default_img", src:product.src,  alt:product_alt %}

      {% if theme_config.global.product_move_two %}
        {% if product.images[1].src %}
          <img class="hover_img" alt="{{product_alt2}}" data-sizes="auto" data-src="{{ product.images[1].src|public_front_asset_url }}" src="{{ 'empty_loading.png' | public_asset_abs_dir_url }}">
        {% endif %}
      {% endif %}
    </a>
    {%- if product.available == 0 -%}
        <div class="soldout">{{ lang.general.sold_out }}</div>
    {%- endif -%}

    {% if theme_config.global.product_discount_label and product.variant.price > 0 %}
      {% if product.variant.price < product.variant.compare_at_price %}
        {% if theme_config.global.product_discount_label_type == 1 %}
          {% assign price = product.variant.compare_at_price | minus: product.variant.price %}
        {% else %}
          {% assign price = product.variant.compare_at_price | minus: product.variant.price | divided_by: product.variant.compare_at_price | times: 100 | floor %}
        {% endif %}
        {% if price > 0 %}
          <div class="discount_tag {{ theme_config.global.discount_label_style }}">
            <div class="discount_tag_graphics"></div>
            <div class="discount_tag_name">
              {%- if theme_config.global.product_discount_label_type == 1 -%}
                {{ price | roundMoney }} <span>OFF</span>
              {%- else -%}
                {{ price }}%
                <span>OFF</span>
              {%- endif -%}
            </div>
          </div>
        {% endif %}
      {% endif %}
    {% endif %}
    <div class="product_tag_list">
      {% if theme_config.global.product_preview %}
        <a class="product_view" data-handle="{{ product.handle }}" data-from="{{product.data_from | default:data_from}}" href="javascript:void(0)">{% include icon_quick_view ,{width:'16',height:'16'} %}</a>
      {% endif %}
    </div>
  </div>
  <h2 class="block_product_name {% unless theme_config.global.product_title_model %}wap_hide{% endunless %}">
    <a class="{{text_ellipsis}}" href="{{product_handle}}">{{ product.highlight_title | default : product.title }}</a>
  </h2>
  {{ supplier_name }}
  <div class="product_price notranslate">
    <span class="general_buying-color">{{ product.variant.price | money }}</span>
    {% if product.variant.compare_at_price != "0" %}
      <span class="product_oldprice general_original-color">{{ product.variant.compare_at_price | money }}</span>
    {% endif %}
  </div>
  {% if theme_config.global.product_discount_label_style_switch and product.variant.price > 0 %}
    {% if product.variant.price < product.variant.compare_at_price %}
      <div class="product_price" style='color:var(--discount_tag_color);background-color:var(--discount_tag_bg);margin-top: 4px;display: flex;justify-content:flex-start;'>
        {{lang.general.save}}
        {% if theme_config.global.product_discount_label_style == 2 %}
          {% assign price = product.variant.compare_at_price | minus: product.variant.price | divided_by: product.variant.compare_at_price | times: 100 | floor %}
          <span class="notranslate">{{price}}%</span>
        {% else %}
          {% assign price = product.variant.compare_at_price | minus: product.variant.price | round: 2  %}
          <span class="notranslate">{{price | money}}</span>
        {% endif %}
      </div>
    {% endif %}
  {% endif %}
  {% include 'comment_star', score:product.star, style:"margin-top:10px;justify-content: flex-start;" %}
  {% if theme_config.global.product_img_list_type != 0 %}
    <div class="block_product_img_list noRender">
      <div class="img_list" style="display: flex;justify-content: flex-start;flex-wrap: wrap;">
        {% if theme_config.global.product_img_list_type == "1" %}
          {% assign colorOptions = theme_config.global.product_sku_options | join: ',' | downcase | split: ',' %}
          {% assign isFindSuccess = false %}
          {% if product.variants.size > 0 %}
            {% for option in product.options %}
              {% assign option_name = option.name | downcase %}
              {% assign hasOptionName = option_name | in_array: colorOptions %}
              {% if hasOptionName and isFindSuccess == false %}
                {% assign isFindSuccess = true %}
                {% assign optionIndex = option.position | plus: 1 %}
                {% assign optionTitle = "option" | append: optionIndex | append: "_title" %}
                {% assign optionValueTitle = "option" | append: optionIndex | append: "_value_title" %}
                {% assign optionValues = "" %}
                {% assign isSelectOptions = "" %}

                {% for optionValueItem in option.values %}
                  {% assign optionValues = optionValues | append: optionValueItem.option_value | append: ',' %}
                {% endfor %}
                {% for variant in product.variants %}
                  {% assign varinatTitle = variant | getArrayValueByKey: optionTitle | downcase %}
                  {% assign variantValue = variant | getArrayValueByKey: optionValueTitle | downcase %}
                  {% assign hasVarinatTitle = colorOptions contains varinatTitle %}
                  {% assign hasValue = optionValues contains variantValue %}

                  {% if hasVarinatTitle != '' and  hasValue != '' %}
                    {% unless isSelectOptions contains variantValue %}
                      {% if variant.image %}
                        {% assign isSelectOptions = isSelectOptions | append: variantValue | append: ',' %}
                        <a href="{{ product_handle | append: "&variant_sku_code=" | append: variant.sku_code }}" class="img_list_item"><img data-src="{{variant.image.src|public_front_asset_url}}" src="{{ 'empty_loading.png' | public_asset_abs_dir_url }}"></a>
                      {% endif %}
                    {% endunless %}
                  {% endif %}
                {% endfor %}

              {% endif %}
            {% endfor %}
          {% endif %}

        {% elsif theme_config.global.product_img_list_type == "2" %}
          {% if product.variants.size > 0 %}
            {% for imgsItem in product.images %}
              <a href="{{ product_handle }}" class="img_list_item"><img data-src="{{imgsItem.src|public_front_asset_url}}" src="{{ 'empty_loading.png' | public_asset_abs_dir_url }}"></a>
            {% endfor %}
          {% endif %}
        {% endif %}
        <div class="morNumber"></div>
      </div>
    </div>
  {% endif %}

</li>